<template>
  <div class="products-page">
    <div class="container">
      <!-- Page Header -->
      <div class="page-header">
        <h1>Our Products</h1>
        <p>Discover our collection of African fashion</p>
      </div>

      <!-- Filters -->
      <div class="filters-section">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="8">
            <el-select 
              v-model="filters.category_id" 
              placeholder="All Categories" 
              clearable
              @change="applyFilters"
            >
              <el-option 
                v-for="cat in appStore.categories" 
                :key="cat.id" 
                :label="cat.name_en" 
                :value="cat.id"
              />
            </el-select>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8">
            <el-checkbox v-model="filters.is_hot" @change="applyFilters">
              <n-icon size="18" color="#FF6B6B"><FlameOutline /></n-icon>
              Hot Products Only
            </el-checkbox>
          </el-col>
        </el-row>
      </div>

      <!-- Products Grid -->
      <el-row v-loading="loading" :gutter="20" class="products-grid">
        <el-col 
          v-for="product in products" 
          :key="product.id" 
          :xs="12" 
          :sm="12" 
          :md="8" 
          :lg="6"
        >
          <ProductCard :product="product" />
        </el-col>
      </el-row>

      <!-- Empty State -->
      <el-empty 
        v-if="!loading && products.length === 0" 
        description="No products found"
      />

      <!-- Pagination -->
      <div v-if="pagination.totalPages > 1" class="pagination-section">
        <el-pagination
          v-model:current-page="pagination.page"
          :page-size="pagination.limit"
          :total="pagination.total"
          layout="prev, pager, next"
          @current-change="loadProducts"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { NIcon } from 'naive-ui'
import { FlameOutline } from '@vicons/ionicons5'
import { useAppStore } from '@/stores/app'
import { productAPI } from '@/api'
import ProductCard from '@/components/ProductCard.vue'

const route = useRoute()
const router = useRouter()
const appStore = useAppStore()

const products = ref([])
const loading = ref(false)

const filters = reactive({
  category_id: null,
  is_hot: false
})

const pagination = reactive({
  page: 1,
  limit: 12,
  total: 0,
  totalPages: 0
})

const loadProducts = async () => {
  try {
    loading.value = true
    const params = {
      page: pagination.page,
      limit: pagination.limit
    }
    
    if (filters.category_id) {
      params.category_id = filters.category_id
    }
    
    if (filters.is_hot) {
      params.is_hot = 1
    }
    
    const response = await productAPI.getAll(params)
    if (response.success) {
      products.value = response.data
      Object.assign(pagination, response.pagination)
    }
  } catch (error) {
    console.error('Failed to load products:', error)
  } finally {
    loading.value = false
  }
}

const applyFilters = () => {
  pagination.page = 1
  loadProducts()
  
  // Update URL query
  const query = {}
  if (filters.category_id) query.category = filters.category_id
  if (filters.is_hot) query.hot = '1'
  router.push({ query })
}

// Initialize filters from URL query
const initFilters = () => {
  if (route.query.category) {
    filters.category_id = parseInt(route.query.category)
  }
  if (route.query.hot) {
    filters.is_hot = true
  }
}

onMounted(() => {
  initFilters()
  loadProducts()
})

watch(() => route.query, () => {
  initFilters()
  loadProducts()
})
</script>

<style lang="scss" scoped>
.products-page {
  padding: 2rem 0 4rem;
}

.page-header {
  text-align: center;
  margin-bottom: 3rem;
  
  h1 {
    font-size: 2.5rem;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
  }
  
  p {
    font-size: 1.125rem;
    color: var(--text-secondary);
  }
}

.filters-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background-color: var(--color-gray-light);
  border-radius: var(--radius-lg);
  
  :deep(.el-select) {
    width: 100%;
  }
}

.products-grid {
  min-height: 400px;
  margin-bottom: 2rem;
}

.pagination-section {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 2rem;
  }
  
  .filters-section {
    :deep(.el-col) {
      margin-bottom: 1rem;
    }
  }
}
</style>

